import React, { useEffect, useState } from 'react'
import Item from './Item'
import PubSub from 'pubsub-js'

export default function List() {
    // 初始化一个state,保存订阅回来的数据,当订阅回来以后,数据改变,视图重新进行渲染
    // 传回的数据是一个数组,这里要填一个空数组
    const [searchList, setSearchList] = useState([])

    // 初始化订阅
    useEffect(() => {
        PubSub.subscribe('github', (_, data) => {
            // 获取到发布的信息,进行渲染
            console.log(data);
            // 通过打印的数据可以看到,我们想要获取的数据,通过setSearchList进行设置
            setSearchList(data.data.items)
        })
    }, [])

    return (
        <div className="row">
            {
                searchList.map(item => {
                    // 将获取的数据进行遍历,并且传值给Item
                    // 将数据进行扩展,全部传给Item
                    return <Item key={item.id} {...item} />
                })
            }
        </div>
    )
}
